import React from 'react'
import styles from './index.module.scss'
import { Button, Card, Form, Input } from 'antd'
import useMainStore from '@/store'

const Login: React.FC = () => {
	const [loginForm] = Form.useForm()
	const { token, setToken } = useMainStore()

	const handleLogin = () => {
		loginForm.validateFields().then((values) => {
			console.log(values)
			setToken(values.username)
			console.log(token);
		})
	}
	return (
		<>
			<div className={`${styles['login-container']} h-screen w-screen flex items-center justify-center`}>
				<Card variant="borderless" className={`${styles['login-card']} w-full w-full flex items-center justify-center`}>
					<div className='flex flex-col items-center'>
						<h1 className='text-2xl font-bold text-[#1677FF] mb-[20px]!'>REACT登录</h1>
					</div>
					<div className={styles['login-divider']}></div>
					<Form
						form={loginForm}
						layout="vertical"
						autoComplete="off"
						onFinish={handleLogin}
						className={styles['login-form']}
					>
						<Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
							<Input type="text" className={styles['login-input']} placeholder="用户名" />
						</Form.Item>
						<Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
							<Input type="password" className={styles['login-input']} placeholder="密码" />
						</Form.Item>
						<Button htmlType='submit' type="primary" className={styles['login-button']} block>
							登录
						</Button>
					</Form>
				</Card>
			</div>
		</>
	)
}

export default Login